<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';
import { REGISTRATION_SEARCH_TYPE, registrationSearchTypeList } from '@/enums/registration.enums';
import { buildAssetSource } from '@/utils';
import { dictVal2Text } from '@/utils/dict.utils';
import { currRoute, withQueryString } from '@/utils/router.utils';
import SectionList from './components/sectionList.vue';
import Steps from './components/steps.vue';

const { query } = currRoute();

const searchTab = ref<REGISTRATION_SEARCH_TYPE>(REGISTRATION_SEARCH_TYPE.DEPARTMENT);

const searchValue = ref(query.searchValue || '');

function handleConfirm({ value }) {
  searchTab.value = value as REGISTRATION_SEARCH_TYPE;
}

const sectionListRef = ref<InstanceType<typeof SectionList>>();

function handleSearch() {
  // 医生搜索
  if (searchTab.value === REGISTRATION_SEARCH_TYPE.DOCTOR) {
    uni.navigateTo({
      url: withQueryString(`/pages/registration/doctorList`, {
        searchValue: searchValue.value
      })
    });
    return;
  }
  sectionListRef.value.dispatchSearch();
}
</script>

<template>
  <view class="registration flex-col">
    <Steps />
    <AuthBar back-home />
    <view class="search flex items-start">
      <view class="relative mr-12 w-128">
        <wd-picker
          v-model="searchTab"
          :columns="registrationSearchTypeList.list"
          title="选择搜索类型"
          use-default-slot
          @confirm="handleConfirm"
        >
          <wd-input :placeholder="dictVal2Text(searchTab, registrationSearchTypeList.list)" readonly />
        </wd-picker>

        <view class="select-arrow">
          <wd-icon name="arrow-down" size="22px" color="var(--primary)" />
        </view>
      </view>

      <view class="relative mr-36 flex-1 self-start">
        <wd-input v-model="searchValue" placeholder="请输入汉字/拼音首字母进行科室模糊搜索" clearable />
        <view class="search-btn">
          <wd-button @click="handleSearch">
            搜索
          </wd-button>
        </view>
      </view>

      <view class="ai-search">
        <view class="ai-search__btn">
          <image :src="buildAssetSource('ai.png')" class="mr-9 h-50 w-50" />
          AI智能导诊
        </view>
        <view class="ai-search__tip">
          <text class="font-bold">
            提示:
          </text> 根据您的病情智能推荐科室和医生
        </view>
      </view>
    </view>
    <view class="flex-1 overflow-auto">
      <SectionList ref="sectionListRef" :search-value="searchValue" />
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '当日挂号',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.registration {
  background-color: var(--bg-color);
  height: 100%;
}

.search {
  padding: 26px 48px;
  --wot-input-inner-height: 68px;
  --wot-input-fs: 20px;
  --wot-input-placeholder-color: #767676;
  :deep(.wd-input) {
    border-radius: 8px;
    background: #eff5ff;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    padding-left: 20px;

    &:after {
      background: transparent;
    }
  }

  .search-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    :deep(.wd-button) {
      width: 98px;
      height: 100%;
      background: var(--primary);
      color: #fff;
      border-radius: 0px 6px 6px 0px;
      font-size: 26px;
    }
  }

  .ai-search {
    .ai-search__btn {
      @apply flex-center;
      background: #fff;
      border-radius: 10px;
      width: 257px;
      height: 68px;
      font-size: 30px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.88);
    }

    .ai-search__tip {
      margin-top: 9px;
      font-size: 14px;
      color: var(--text-color);
    }
  }

  .select-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
